body {
  --mono: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
  --sans: 'Open Sans', sans-serif;

  /* Colors */
  --brand2: #c5e5b4;
  --brand3: #99cc7d;
  --brand4: #84ba64;
  --brand5: #5fa04e;
  --brand6: #417e38;
  --brand7: #2c682c;
  --brand8: #215127;
  --brand9: #1a3f1d;
  --brand10: #edf2eb;
  --brand11: #448533;
  --black0: #ffffff;
  --black1: #f6f7f9;
  --black2: #e9edf0;
  --black3: #d9e1e4;
  --black4: #cbd4d9;
  --black5: #b1bcc2;
  --black6: #929fa5;
  --black7: #6b7880;
  --black8: #556066;
  --black9: #2c3437;
  --black10: #1f272a;
  --black11: #515c62;
  --black12: #505d65;
  --body0: #f2f2f2;
  --warning1: #fdf3e7;
  --warning2: #fad9b0;
  --warning3: #f5bc75;
  --warning4: #e99c40;
  --warning5: #d07912;
  --warning6: #ae5f00;
  --warning7: #8b4d04;
  --warning8: #683d08;
  --warning9: #4d2f0b;
  --danger1: #fbf1f0;
  --danger2: #fad3d4;
  --danger3: #fab6b7;
  --danger4: #fa8e8e;
  --danger5: #f65354;
  --danger6: #de1a1b;
  --danger7: #b80c0c;
  --danger8: #900e0e;
  --danger9: #661514;
  --info1: #e9f4fa;
  --info2: #bce6fc;
  --info3: #8ed4f8;
  --info4: #52baed;
  --info5: #229ad6;
  --info6: #0c7bb3;
  --info7: #066291;
  --info8: #074d71;
  --info9: #0a3953;
  --purple1: #f7f1fb;
  --purple2: #ead9fb;
  --purple3: #dbbdf9;
  --purple4: #c79bf2;
  --purple5: #af74e8;
  --purple6: #9756d6;
  --purple7: #7d3cbe;
  --purple8: #642b9e;
  --purple9: #361b52;
  --pink1: #fbf0f4;
  --pink2: #fbd4e6;
  --pink3: #fbb4d2;
  --pink4: #f68bb7;
  --pink5: #ed5393;
  --pink6: #d6246e;
  --pink7: #b01356;
  --pink8: #8b1245;
  --pink9: #411526;
  --color-brand-primary: var(--brand5);
  --color-text-primary: var(--black9);
  --color-text-secondary: var(--black7);
  --color-text-high-contrast: var(--black12);
  --color-text-accent: var(--brand11);
  --color-border-primary: var(--black4);
  --color-border-secondary: var(--black3);
  --color-border-accent: var(--color-brand-primary);
  --color-fill-app: var(--black0);
  --color-fill-body: var(--body0);
  --color-fill-canvas: var(--black1);
  --color-fill-side-nav: var(--black1);
  --color-fill-top-nav: var(--black0);
  --color-fill-banner: #9992;
  --color-fill-action: var(--brand5);
  --color-fill-button: var(--brand5);
  --color-dropdown-background: var(--black3);
  --color-dropdown-hover: var(--black4);
  --color-blog-card-background: var(--brand2);

  /*for actionable elements*/

  /* Typography */
  --base-type-face: var(--sans);
  --font-size-display1: 6rem;
  --font-size-display2: 4.8rem;
  --font-size-display3: 3.4rem;
  --font-size-display4: 2.3rem;
  --font-size-display5: 1.8rem;
  --font-size-headline: 2.4rem;
  --font-size-subheading: 2rem;
  --font-size-body1: 1.6rem;
  --font-size-body2: 1.4rem;
  --font-size-body3: 1.3rem;
  --font-size-caption: 1.2rem;
  --font-size-overline: 1rem;
  --font-size-code: 1.6rem;
  --line-height-display1: 7.2rem;
  --line-height-display2: 5.7rem;
  --line-height-display3: 4.08rem;
  --line-height-display4: 2.8rem;
  --line-height-display5: 1.5rem;
  --line-height-headline: 2.88rem;
  --line-height-subheading: 3rem;
  --line-height-body1: 2.4rem;
  --line-height-body2: 2.1rem;
  --line-height-caption: 1.8rem;
  --line-height-overline: 1.5rem;
  --line-height-code: 2.4rem;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 900;
  --font-style-regular: normal;

  /* Spacing */
  --space-01: 0.1rem;
  --space-02: 0.2rem;
  --space-04: 0.4rem;
  --space-07: 0.7rem;
  --space-08: 0.8rem;
  --space-12: 1.2rem;
  --space-13: 1.3rem;
  --space-14: 1.4rem;
  --space-16: 1.6rem;
  --space-20: 2rem;
  --space-24: 2.4rem;
  --space-32: 3.2rem;
  --space-40: 4rem;
  --space-48: 4.8rem;
  --space-64: 6.4rem;
  --space-80: 8rem;
  --space-96: 9.6rem;
  --space-128: 12.8rem;
  --space-160: 16rem;
}

.dark {
  /* Colors */
  --color-brand-primary: var(--brand5);
  --color-text-primary: var(--black4);
  --color-text-secondary: var(--black6);
  --color-text-high-contrast: var(--black4);
  --color-text-accent: var(--brand4);
  --color-border-primary: var(--black4);
  --color-border-secondary: var(--black3);
  --color-border-accent: var(--brand4);
  --color-fill-app: #090c15;
  --color-fill-body: #090c15;
  --color-fill-canvas: #090c15;
  --color-fill-side-nav: #0d111d;
  --color-fill-top-nav: #090c15;
  --color-fill-action: var(--brand4);
  --color-fill-button: var(--pink5);
  --color-dropdown-background: var(--black10);
  --color-dropdown-hover: var(--black11);
  --color-blog-card-background: var(--black9);
}
